<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta charset="utf-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>引导页</title>
</head>
<script src="js/TouchSlide.1.1.js"></script>
<script src="../comment_js/jquery-1.11.1.js"></script>
<link rel="stylesheet" href="css/css.css">
<script type="text/javascript">
    // 控制rem值
    document.documentElement.style.fontSize = document.documentElement.clientWidth / 7.5 + 'px';
    /*var width = document.documentElement.clientWidth!=0?document.documentElement.clientWidth:window.screen.availWidth;
     document.documentElement.style.fontSize=width/7.2+'px';*/

</script>
<script src="../comment_js/mobile_agent_ext2.js" type="text/javascript"></script>
<body>
<style>
		 * {
		 	font-family: 'Microsoft YaHei';
		 	-webkit-tap-highlight-color: rgba(255,255,255,0);
		 }
		li {
			position: relative!important;
		}
		img {
			position: absolute!important;
			width: 7.224rem!important;
			height: 6.657rem!important;
			top: 40%;
			left: 50%;
			margin-top: -3.3285rem;
			margin-left: -3.612rem;
		}
		li div {
			position: absolute;
			bottom:1.6rem;
			width: 100%;
			left: 50%;
			margin-left: -50%;
		}
		li div p{
			text-align: center;
		}
		li div p:first-child {
			font-size: 0.425rem;
			font-weight: bold;
			color: #333;
			line-height: 0.8rem;
			font-family: 'Microsoft YaHei';
		}
		li div p:last-child ,li div p:nth-child(2){
			
			font-size: 0.25rem;
			/* line-height: 0.3rem; */
			color: #999;
			font-family: 'Microsoft YaHei';
		}
		.last-p{
			/* line-height: 0!important; */
		}
		.btn {
			width: 2.6rem;
			height: 0.88rem;
			font-size: 0.30rem!important;
			text-align: center;
			line-height: 0.88rem!important;
			border-radius: 0.1rem;
			background-color: #4f77db;
			color: #fff!important;
			margin: 0.2rem auto 0 auto;
		}
		.last_div {
			position: absolute;
			bottom: 0.48rem;
			z-index: 1000000!important;
		}

</style>
<div id="content">
    <div id="focus" class="focus">
        <div class="hd">
            <ul></ul>
        </div>
        <div class="bd">
            <ul>
                <li class="one">
                    <img src="img/car1.png"/>
                    <div>
                        <p>车辆保障，智慧互动</p>
                        <p>记录驾驶轨迹，诊断车辆故障，实时守护</p>
                    </div>
                </li>
                <li class="two">
                    <img src="img/car2.png"/>
                    <div>
                        <p>救援必备，一路无忧</p>
                        <p>24小时救援维保，人工客服，全力保障</p>
                    </div>
                </li>
                <li class="three">
                    <img src="img/car3.png"/>
                    <div>
                        <p>驾驶分析，改善驾驶习惯</p>
                        <p style="">改善驾驶习惯，降低油耗，更多成本</p>
                    </div>
                </li>
                <li class="last">
                    <img src="img/car4.png"/>
                    <div class="last_div">
                        <p>更多优惠，更贴心</p>
                        <p>尿素劵，优惠券更多惊喜等着你</p>
                        <p class="btn" id="start">开始行程</p>
                    </div>
                </li>
            </ul>
        </div>
    </div>
    <script type="text/javascript">
	var NUM = window.devicePixelRatio;
	var W = document.documentElement.clientWidth;
	var H = document.documentElement.clientHeight;
	
	console.log(document.documentElement.clientHeight)
	TouchSlide( {
		slideCell: "#focus", titCell:".hd ul",  autoPage: true,//开启自动分页 autoPage:true ，此时设置 titCell 为导航元素包裹层
		mainCell:".bd ul", effect:"left", autoPlay:false, //自动播放
		autoPage:true, //自动分页
		startFun: function (i, c) {
			if(i==3){
				$('#focus .hd').hide()
				$('.last div').css({
					bottom: '0.50rem'
				});
			}else {
				$('#focus .hd').show()
			}
		 }
	})
	$('.last .last_div').on('click', '.btn', function(event) {
		event.preventDefault();
		if (mobileAgent.isRunOnApp()) {
			mobileAgent.goPage("MAIN_PAGE");
		}else {
			alert('我是浏览器')
		}
	});


    </script>
</div>
</body>
</html>
